<template>
  <div>
    <div ref="visitChart" v-height="320"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "经营信息发布统计",
  data() {
    return {};
  },

  methods: {
    handleSetVisitChart() {
      this.visitChart = echarts.init(this.$refs.visitChart);
      this.visitChart.setOption({
        legend: {
          data: ["Rainfall", "Evaporation"],
          right: 60,
        },
        grid: {
          left: 0,
          right: 60,
          bottom: 30,
          top: 30,
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "Jan",
              "Feb",
              "Mar",
              "Apr",
              "May",
              "Jun",
              "Jul",
              "Aug",
              "Sep",
              "Oct",
              "Nov",
              "Dec",
            ],
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#7F8B9C",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#7F8B9C",
                width: 1,
              },
            },
          },
        ],
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#7F8B9C",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#F5F7F9",
            },
          },
          type: "value",
        },
        series: [
          {
            name: "Rainfall",
            type: "bar",
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
          },
          {
            name: "Evaporation",
            type: "bar",
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
        ],
        color: ["#9860DF", "#1495EB", "#00CC66", "#F9D249", "#ff9900"],
      });
    },
    handleResize() {
      this.visitChart.resize();
    },
  },
  mounted() {
    this.handleSetVisitChart();
  },
  beforeDestroy() {
    if (this.visitChart) {
      this.visitChart.dispose();
      this.visitChart = null;
    }
  },
};
</script>
